<template>
    <div>
        <el-row v-loading.body="listLoading" element-loading-text="正在查询，请稍后...">
            <iframe id="pdf_frame" frameborder="0" width="100%" height="800" style="margin-top: 20px"></iframe>
        </el-row>
    </div>
</template>
<script>

    import { getOrder } from '@/api/order/order.js';
    import { parseTime } from '@/utils/time';

    import "pdfmake/build/pdfmake";
    import "pdfmake/build/vfs_fonts";

    export default {
        props:{
            order_id: {
                default: 0
            },
        },
        data() {
            return {
                order: null,
                pdfData : null,
                listLoading: false,
            };
        },
        created(){
            this.fetchData();
        },
        methods: {
            fetchData() {
                this.listLoading = true;
                getOrder(this.order_id).then(response => {
                    this.order = response.data;
                    this.pdfInit(this.order);
                    this.listLoading = false;
                });
            },
            contract_download(){
                pdfMake.createPdf(this.pdfData).download(this.order.orderContract.contract_number+".pdf");
            },
            contract_print(){
                pdfMake.createPdf(this.pdfData).print();
            },
            getGoods(order){
                var goods = '';
                order.orderGoods.forEach(function(value, index, array) {
                    goods += value.name + " ";
                });
                return goods;
            },
            pdfInit(order){
                this.pdfData = {
                    pageSize:{ width: 250, height: 300 },
                    pageMargins: [ 10, 0, 0, 0 ],
                    content: [
                        {
                            width: 130,
                            image:this.getImage(),
                            margin: [50, 15, 0, 15]
                        },
                        {
                            table: {
                                widths: [40, 40, 40, 70],
                                body: [
                                    [{text:'订单号',style:'table'}, {text:order.order.order_number,style:'number',colSpan: 3},{},{}],
                                    [{text:'收货人',style:'table'}, {text:order.orderCustomer.recive_name,style:'table'},{text:'电话',style:'table'},{text:order.orderCustomer.recive_phone,style:'table'}],
                                    [{text:'地址',style:'table'}, {text:order.orderCustomer.recive_addr + ' ' + order.orderCustomer.recive_addr_info,style:'address',colSpan: 3},{},{}],
                                    [{text:'发货人',style:'table'}, {text:order.orderCustomer.send_name,style:'table'},{text:'电话',style:'table'},{text:order.orderCustomer.send_phone,style:'table'}],
                                    [{text:'地址',style:'table'}, {text:order.orderCustomer.send_addr + ' ' + order.orderCustomer.send_addr_info,style:'address',colSpan: 3},{},{}],
                                    [{text:'货物名称',style:'table',colSpan: 2},{}, {text:this.getGoods(order),style:'table',colSpan: 2},{}],
                                ]
                            }
                        },
                    ],
                    styles: {

                        table: {
                            fontSize: 10,
                            alignment: 'center',
                            margin: [0, 5, 0, 5]
                        },
                        number: {
                            fontSize: 12,
                            bold: true,
                            alignment: 'center',
                            margin: [0, 5, 0, 5]
                        },
                        address: {
                            fontSize: 10,
                            margin: [0, 5, 0, 5]
                        },
                    },
                    defaultStyle: {
                        font: 'fzlt'
                    }
                };

                pdfMake.fonts = {
                    fzlt: {
                        normal: 'fzlt.ttf',
                        bold: 'fzlt.ttf',
                        italics: 'fzlt.ttf',
                        bolditalics: 'fzlt.ttf',
                    }
                };
                const pdfDocGenerator = pdfMake.createPdf(this.pdfData);
                pdfDocGenerator.getDataUrl((dataUrl) => {
                    document.getElementById('pdf_frame').src = dataUrl;
                });
            },
            time: function (value) {
                return parseTime(value,"{y}年{m}月{d}日 {hh}:{mm}:{dd}");
            },
            day: function (value) {
                return parseTime(value,"{y}年{m}月{d}日");
            },
            getImage(){
                return '';
            }
        }
    }
</script>


